<template>
  <!-- 1921年建党 -->
  <div class="bg">
    <!-- 红船 -->
    <div class="hongchuan">
      <img src="../assets/红船.png" alt="红船" />
    </div>

    <!-- 会议图片 -->
    <div class="huiyi animated fadeInRight">
      <img src="../assets/chengli.jpg" alt="100" />
    </div>

    <!-- 文字 -->
    <div class="title">
      <p class="animated fadeInUp" style="animation-delay: 1s">
        1921年7月23日中国共产党正式成立
      </p>
      <p class="animated fadeInUp" style="animation-delay: 2s">
        确立了新民主主义革命的正确道路
      </p>
      <p class="animated fadeInUp" style="animation-delay: 3s">
        让灾难深重的中国人民看到了新的希望、有了新的依靠
      </p>
    </div>
    <!-- <el-tooltip class="item" effect="dark" content="下一页" placement="bottom">
      <el-button type="danger" icon="el-icon-caret-bottom" circle class="btn animated pulse" @click="btn"></el-button>
    </el-tooltip> -->
    <el-tooltip class="item" effect="dark" content="下一页" placement="bottom">
      <el-button
        type="danger"
        icon="el-icon-caret-bottom"
        circle
        class="btn animated pulse"
        @click="btn"
      ></el-button>
    </el-tooltip>

    <!-- 步骤条 -->
    <div class="bzt">
       <el-steps :space="70" :active="0" finish-status="success">
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
    </el-steps> 
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },

  methods: {
    btn() {
      // 跳转
      this.$router.push({ path: "/index3" });
    },
  },
};
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  background-image: url("../assets/background1.png");
  background-size: 100% 100%;
  z-index: -2;
  float: left;
}
/* 红船样式 */
.hongchuan {
  width: 20rem;
  height: 10rem;
  position: absolute;
  left: -20%;
  top: -20%;
  animation: hc 2000ms;
  animation-fill-mode: forwards;
}
.hongchuan img {
  width: 100%;
  height: 100%;
}
@keyframes hc {
  0% {
    left: -20%;
    top: -20%;
  }
  100% {
    left: 5%;
    top: 5%;
  }
}
/* 会议图片样式 */
.huiyi {
  width: 25rem;
  height: 15rem;
  position: absolute;
  left: 70%;
  top: 5%;
  box-shadow: 0 0 4 #000;
}
.huiyi img {
  width: 100%;
  height: 100%;
}

/* 文字部分样式 */
.title {
  width: 40rem;
  height: 15rem;
  /* background-color: crimson; */
  margin: auto;
  position: relative;
  top: 30%;
  background-image: url("../assets/dhk.png");
  background-size: 100% 100%;
  padding-top: 1rem;
}
.title p {
  text-align: center;
  font-weight: 700;
  font-size: 800;
  animation-duration: 1s;
  font-size: 20px;
  color: #f1f0e8;
}

.btn {
  /* margin: auto; */
  position: relative;
  left: 50%;
  top: 45%;
  animation-iteration-count: infinite;
  animation-duration: 2000ms;
  background-color: orangered;
  border: 1px solid #ffffff;
}

.item {
  margin: 4px;
}

.bzt{
    width: 30rem;
    position: absolute;
    left: 40%;
    top: 90%;
   
}
</style>